<template>
  <div class="main">
    <el-container class="main-container">
      <!--头部-->
      <el-header class="main-header">
        <div
          class="main-header-color"
          :class="headerSkinColor?headerSkinColor:'main-header-color-1'"
        >
          <div class="main-header-left">
            <ul>
              <li @click="changeSiderCollapsed">
                <i :class="siderCollapsed?'el-icon-s-unfold':'el-icon-s-fold'"></i>
              </li>
              <li class="logo">HzyAdminUI Vue 单页版</li>
            </ul>
          </div>
          <div class="main-header-right">
            <ul>
              <li>
                <el-dropdown @command="handleLogOutCommand">
                  <span class="el-dropdown-link">
                    <i class="el-icon-s-custom el-icon--left"></i>
                    管理员
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="logout">
                      <i class="el-icon-switch-button"></i>退出登录
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </li>
              <li @click="dialogVisibleSkin=!dialogVisibleSkin;" title="美化">
                <i class="el-icon-magic-stick"></i>
              </li>
              <li @click="handleFullScreen" title="放大/缩小">
                <i class="el-icon-full-screen"></i>
              </li>
              <li @click="tabsMove(1)" title="选项卡右移动">
                <i class="el-icon-arrow-right"></i>
              </li>
              <li>
                <el-dropdown @command="handleTabsCommand">
                  <span class="el-dropdown-link">选项卡</span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item style="color:red" command="Other">
                      <i class="el-icon-circle-close"></i>关闭其他
                    </el-dropdown-item>
                    <el-dropdown-item style="color:red" command="All">
                      <i class="el-icon-circle-close"></i>关闭所有
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </li>
              <li @click="tabsMove(0)" title="选项卡左移动">
                <i class="el-icon-arrow-left"></i>
              </li>
            </ul>
            <ul class="main-login">
              <li @click="logout">
                <i class="el-icon-arrow-right"></i>
              </li>
            </ul>
          </div>
        </div>
      </el-header>
      <el-container>
        <!--菜单-->
        <el-aside class="main-aside" width :class="[(siderCollapsed?'main-aside-0':'main-aside-220'),menuSkin.parentBGColor]">
          <el-menu
            :default-active="$route.name"
            class="main-menu"
            @open="handleOpen"
            @close="handleClose"
            :collapse="siderCollapsed"
            router
            :background-color="menuSkin.backgroundColor"
            :text-color="menuSkin.textColor"
            :active-text-color="menuSkin.activeTextColor"
          >
            <el-menu-item index="/Home">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="Sys">
              <template slot="title">
                <i class="el-icon-monitor"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item-group title="我是分组">
                <el-menu-item index="/User">用户管理</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!--content 内容-->
        <el-main class="main-main">
          <div class="main-tabs">
            <ul>
              <!-- <li v-for="(item,index) in 50" :key="index" v-bind:class="index==2?'active':''">
                <span>{{'我是菜单'+item}}</span>
                <template v-if="index>0">
                  <i class="el-icon-close"></i>
                </template>
              </li>-->
              <li
                v-for="(item,index) in tabList"
                :key="index"
                v-bind:class="{active:item.active}"
                @click="triggerTab(item)"
              >
                <span>{{item.title}}</span>
                <template v-if="index>0">
                  <i class="el-icon-close" @click.stop="removeTab(index)"></i>
                </template>
              </li>
            </ul>
          </div>
          <!--body 内容-->
          <div class="main-body">
            <el-collapse-transition>
              <router-view></router-view>
            </el-collapse-transition>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <!--弹框 皮肤修改-->
    <el-dialog title="美化" :visible.sync="dialogVisibleSkin" width="30%" custom-class="hzy-dialog">
      <div>
        <h4>头部颜色</h4>
        <div class="main-Skin">
          <div class="main-Skin-header-color-1" @click="setHeaderSkinColor('main-header-color-1')"></div>
        </div>
        <div class="main-Skin">
          <div class="main-Skin-header-color-2" @click="setHeaderSkinColor('main-header-color-2')"></div>
        </div>
        <div class="main-Skin">
          <div class="main-Skin-header-color-3" @click="setHeaderSkinColor('main-header-color-3')"></div>
        </div>
      </div>
      <div>
        <h4>菜单颜色</h4>
        <div class="main-Skin">
          <div class="main-Skin-menu-color-1" @click="setMenuSkinColor(1)"></div>
        </div>
        <div class="main-Skin">
          <div class="main-Skin-menu-color-2" @click="setMenuSkinColor(2)"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style>
</style>
<script>
//css
import "../css/main.scss";
//js
import adminTabs from "../js/tabs";
//vuex
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  name: "AdminMain",
  data() {
    return {
      fullscreen: false,
      dialogVisibleSkin: false
    };
  },
  computed: {
    ...mapState("main", {
      siderCollapsed: state => state.siderCollapsed
    }),
    ...mapState("main", {
      tabList: state => state.tabs.list
    }),
    ...mapState("main", {
      headerSkinColor: state => state.headerSkinColor
    }),
    ...mapState("main", {
      menuSkin: state => state.menuSkin
    })
  },
  components: {
    //HelloWorld,
    //MessageBox
  },
  mounted() {
    adminTabs.start();
    //页面加载 设置菜单选中状态
    var _hash = window.location.hash;
    if (_hash === "#/") {
      this.$router.push({ name: "/Home" });
    } else if (_hash != "#" + this.$route.name) {
      this.$router.push({ name: this.$route.name });
    }
    //
    if (window.innerWidth <= 720 && !this.siderCollapsed) {
      this.changeSiderCollapsed(true);
    }
  },
  methods: {
    //菜单项展开
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    //菜单项收起
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      //退出登录
      this.$router.push("/login");
    },
    handleLogOutCommand() {
      this.logout();
    },
    //
    handleTabsCommand(tag) {
      console.log(tag);
      if (tag == "Other") {
        this.closeOtherTab();
      } else {
        this.closeAllTab();
      }
    },
    tabsMove(o) {
      if (o == 1) {
        adminTabs.leftMove();
      } else {
        adminTabs.rigthMove();
      }
    },
    //点击选项卡 路由到地址
    triggerTab(item) {
      var _hash = window.location.hash;
      if (_hash === "#" + item.name) return; //判断路由不能重复加载
      this.$router.push({ name: item.name });
    },
    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    ...mapMutations("main", { addOrCheckedTab: "addOrCheckedTab" }), //添加选项卡
    ...mapMutations("main", { removeTab: "removeTab" }), //移除选项卡
    ...mapMutations("main", { closeOtherTab: "closeOtherTab" }), //关闭其他选项卡
    ...mapMutations("main", { closeAllTab: "closeAllTab" }), //关闭所有选项卡
    ...mapMutations("main", { changeSiderCollapsed: "changeSiderCollapsed" }), //改变左侧菜单状态
    ...mapMutations("main", { setHeaderSkinColor: "setHeaderSkinColor" }), //设置头部皮肤颜色
    ...mapMutations("main", { setMenuSkinColor: "setMenuSkinColor" }), ////设置菜单皮肤颜色
    ...mapActions("main", { postAuthorize: "postAuthorize" })
  }
};
</script>
